<template>
  <div class="underwear-orders-detail">
    <n-modal v-model:show="showModal" preset="card" style="width: 1210px;height: 990px;"
      :to="'.underwear-orders-detail'" transform-origin="center">
      <template #header>
        <div class="my-title--primary" v-if="!returnGoods">内裤订单（详情）</div>
        <div class="my-title--primary" v-else>退货</div>
      </template>
      <div class="underwear-orders-detail__content" v-if="!returnGoods">
        <header>
          <div><img /> 李嘉贤 136 7894 5698</div>
          <div>
            <span>会员类型：至尊会员</span>
            <span>所属店铺：北湖区健康路4号</span>
          </div>
        </header>
        <div>
          <div>
            <section>
              <span>订单编号：HDNK-2021090914825864522522</span>
              <span>订单状态：正常</span>
            </section>

            <div class="message-content">
              <header>
                短信内容
              </header>
              <section>AIDS大家都长时间的哈啥ask觉得噶说的话奥迪哦哈死哦觉得还好阿瑟i哦哦i撒谎低价额外订啊大噶啊的哈设计的哈师大为上帝就会</section>
            </div>
            <template v-if="false">
              <div class="get-number">
                <div>领取次数：6</div>
                <div>剩余次数：0</div>
              </div>
              <n-data-table :columns="columns" :data="data" striped />
            </template>

            <div class="chargeback-details" v-if="false">
              <header class="my-title--primary">退单详情</header>
              <section>
                <span>退回金额：￥248</span>
                <span>退回方式：账户余额</span>
                <span>退回时间：2022-02-25 09:51:18</span>
                <span>操作人：小米</span>
              </section>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="underwear-orders-detail__chargeback">
        <n-data-table style="--n-border-color-modal: #D8D8D8" :columns="returnGoodsColumns" :data="returnGoodsData"
          striped />
        <section>
          <div>订单金额：￥248</div>
          <div>应退金额：￥0.01</div>
          <div>操作人：小米</div>
        </section>
        <div class="refund-channel">
          <header class="my-title--primary">退回金额渠道</header>
          <section>
            <div>
              <span>至尊钱包</span><span>0</span>
            </div>
            <div>
              <span>需退回现金</span><span>198</span>
            </div>
          </section>
        </div>
        <div class="select-return-mode">
          <header class="my-title--primary">选择退回方式</header>
          <section>微信</section>
        </div>
      </div>
      <template #footer>
        <div class="underwear-orders-detail__footer" :style="returnGoods && 'flex-direction: row-reverse;' ">
          <div v-if="!returnGoods">
            <button class="chargeback" @click="returnGoods = true">退单</button>
            <button class="print">打印</button>
          </div>
          <button class="my-btn--primary">确认</button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
<script></script>
<script setup>
import { ref } from 'vue';
const showModal = ref(false);
const columns = [
  {
    title: '领取次数',
    key: 'getNumber',
  },
  {
    title: '领取时间',
    key: 'getTime',
    width: 400
  },
  {
    title: '操作人',
    key: 'operator'
  },
  {
    title: '领取产品',
    key: 'getProduct',
  },
], data = Array.from({ length: 3 }).map((_, index) => ({
  key: index,
  getNumber: `第一次领取`,
  getTime: '2022-10-11  08:30:55',
  operator: '李嘉贤',
  getProduct: 'K007-活动内裤',
}));

const returnGoods = ref(false);
const returnGoodsColumns = [
  {
    title: '退货商品',
    key: 'returnGoods',
  },
  {
    title: '领取次数',
    key: 'getNumber',
  },
  {
    title: '剩余次数',
    key: 'residueDegree'
  },
  {
    title: '订单金额￥',
    key: 'orderAmount',
  },
], returnGoodsData = [{

  returnGoods: `活动内裤卡`,
  getNumber: 1,
  residueDegree: 3,
  orderAmount: 0.01,
}]
</script>
<style lang="less" scoped>
.underwear-orders-detail {
  * {
    line-height: 1;
  }

  .my-title--primary {
    display: flex;
    align-items: center;

    &::before {
      display: block;
      position: initial;
      margin-right: 12px;
    }
  }

  /deep/ .n-card {
    .n-card-header,
    .n-card__footer {
      padding: 30px;
    }

    .n-card__content {
      padding: 0 30px;

    }

    .n-card__footer {
      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
    }

  }

  &__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;

    >header {
      display: flex;
      flex-direction: column;
      padding: 0 98px;
      background-color: #ccc;
      height: 150px;

      >div {
        display: flex;
        align-items: center;
      }

      >div:first-child {
        margin: 30px 0 10px;

        >img {
          margin: 0 20px 0 -68px;
          width: 48px;
          height: 48px;
        }

        font-size: 30px;
        font-weight: bold;
        color: #2E323D;
      }

      >div:last-child {
        font-size: 24px;
        color: #4A5060;

        >span:first-child {
          margin-right: 266px;
        }
      }
    }

    >div {
      flex: 1;
      position: relative;
      height: 100%;

      >div {
        position: absolute;
        overflow-y: scroll;
        height: 100%;

        >section {
          display: flex;
          justify-content: space-between;
          margin-top: 30px;
          font-size: 24px;
          color: #4A5060;

          >span:last-child {
            margin-right: 288px;
          }
        }

        .message-content {
          margin-top: 47px;

          >header {
            margin-bottom: 18px;
            font-size: 28px;
            font-weight: bold;
            color: #4A5060;
          }

          >section {
            padding: 24px 38px 30px 30px;
            height: 328px;
            font-size: 24px;
            background: #F5F7FA;
            color: #4A5060;
            line-height: 36px;
            border: 1px solid #E5E5E5;
            border-radius: 5px;
          }
        }

        .get-number {
          float: right;
          display: grid;
          grid-template-columns: 50% 50%;
          margin-top: 40px;
          padding: 18px 30px;
          width: 604px;
          background: #F7F7F7;
          overflow: hidden;

          >div {
            position: relative;
            width: 100%;
            height: 100%;
            font-size: 24px;
            font-weight: bold;
            color: #4A5060;
          }

          >div:first-child {
            &::after {
              content: '';
              position: absolute;
              top: 0;
              right: 0;
              width: 1px;
              height: 100%;
              background: #D8D8D8;
            }
          }

          >div:last-child {
            margin-left: 85px;
          }
        }

        /deep/ .n-data-table {
          margin-top: 120px;
        }

        .chargeback-details {
          margin-top: 50px;

          >section {
            display: grid;
            grid-template-columns: 750px auto;
            grid-auto-rows: auto;
            grid-row-gap: 19px;
            margin-top: 30px;
            padding: 30px 0;
            font-size: 24px;
            background: #F7F7F7;
            color: #4A5060;

            >span:nth-child(2n-1) {
              margin-left: 79px;
            }
          }
        }
      }
    }
  }

  &__chargeback {
    >section {
      display: grid;
      grid-template-columns: 694px auto;
      grid-auto-rows: auto;
      grid-row-gap: 19px;
      margin-top: 50px;
      font-size: 24px;
      color: #4A5060;
    }

    .refund-channel {
      margin-top: 60px;

      >header {
        margin-bottom: 30px;
      }

      >section {
        >div {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 21px 0 19px;
          width: 378px;
          height: 58px;
          background: #F8F8F8;
          border: 1px solid #E5E5E5;
          border-radius: 5px;
          box-sizing: border-box;

          >span {
            font-size: 26px;
            color: #2E323D;
          }

          >span:last-child {
            color: #1981F4;

            &::after {
              content: '元';
              margin-left: 15px;
              color: #2E323D;
            }
          }
        }

        >div+div {
          margin-top: 20px;
        }
      }
    }

    .select-return-mode {
      margin-top: 30px;
      >header {
        margin-bottom: 20px;
      }

      >section {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 156px;
        height: 58px;
        font-size: 22px;
        font-weight: 400;
        color: #4A5060;
        background: #F8F8F8;
        border: 1px solid #E5E5E5;
        border-radius: 4px;


      }
    }
  }

  &__footer {
    display: flex;
    justify-content: space-between;

    >div {

      .print,
      .chargeback {
        width: 156px;
        height: 66px;
        font-size: 30px;
        background: #EBF4FF;
        color: #2C8CF0;
        border: 1px solid #2C8CF0;
        border-radius: 5px;
      }

      .chargeback {
        margin-right: 18px;
        background: #FFEFEB;
        color: #EC3F14;
        border-color: #EC3F14;
      }
    }
  }
}
</style>